<template>
    <div>图片压缩
      <img id="imgShow" src="" width="200" height="200" alt=""/>
      <input id="filed" type="file" accept="image/*"/>
      <button @click="uploadImg" class="btn" :loading="loading">上传</button>
      <button @click="getImg" class="btn" :loading="loading">获取上传列表</button>
      <div class="img-list">
        <img v-for="(item,key) in imgList"
             :key="key"
             :src="item.src" alt="">
      </div>
    </div>
</template>

<script>
import { debounce } from '@/libs/tools';
import { UploadCollections, Upload } from '@/axios/api';

export default {
    name: 'imgZip',
    data() {
        return {
            imgList: [],
            loading: false,
        };
    },
    mounted() {
        this.fnCompress(0.7);
    },
    methods: {
        getImg() {
            debounce(this.getImgs);
        },
        async getImgs() {
            this.loading = true;
            const { data: { success, result } } = await UploadCollections().GET();
            if (success) {
                this.imgList = result;
            }
            this.loading = false;
        },
        async uploadImg() {
            const file = document.getElementById('filed').files[0];
            if (!file) {
                this.$Message.error('未选择上传文件！');
                return;
            }
            this.loading = true;
            const { data: { success, result } } = await Upload().POST({
                Upload: file,
            });
            if (success) {
                this.getImg();
            }
            this.loading = false;
        },
        fnCompress(quality = 1) {
            // 在input file内容改变的时候触发事件
            document.getElementById('filed').onchange = () => {
                const file = document.getElementById('filed').files[0];
                const reader = new FileReader();
                // 使用该对象读取file文件
                reader.readAsDataURL(file);
                // 读取文件成功后执行的方法函数
                reader.onload = (e) => {
                    document.getElementById('imgShow').src = e.target.result;
                    // 压缩图片
                    document.getElementById('imgShow').onload = function () {
                        const width = this.width;
                        const height = this.height;
                        const canvas = document.createElement('canvas');
                        canvas.width = width;
                        canvas.height = height;
                        const context = canvas.getContext('2d');
                        context.clearRect(0, 0, width, height);
                        context.drawImage(this, 0, 0, width, height);
                        const dataUrl = canvas.toDataURL('image/jpeg', quality);
                        const a = document.createElement('a');
                        const event = new MouseEvent('click'); // 自定义事件
                        a.download = '压缩图片';
                        a.href = dataUrl;
                        a.dispatchEvent(event); // 自定义触发事件
                    };
                };
            };
        },
    },
};
</script>

<style scoped lang="less">
.btn{
  padding:4px 8px;
  margin-left: 10px;
  border-radius: 2px;
  background-color: #2d8cf0;
  transition: all .2s;
  cursor: pointer;
  color: #fff;
  &:hover{
    background-color: #0d74e0;
  }
}
.img-list{
  margin-top: 10px;
  display: flex;
  flex-flow: row wrap;
  img{
    display: block;
    width: 50%;
    height: auto;
  }
}
</style>
